<!--
* /department/manage 主页面
* |-- div(.department-manage-container) 总容器
*   |-- div(.department-manage-guide) 部门管理的导航栏目
*     |-- div(.department-manage-guide-item) 栏目里的每一个选项，具体内容见 guide 属性
*   |-- div(.department-manage-content) 栏目里每个选项对应的内容
*     |-- Manage_Total 对应 "综合统计" 的内容
*     |-- Manage_Task 对应 "任务统计" 的内容
*     |-- Manage_Sign 对应 "缺勤统计" 的内容
-->
<template>
    <div class="department-manage-container">
        <div class="department-manage-guide">
            <div 
                class="department-manage-guide-item" 
                v-for="(item, index) in guide" 
                :key="index" 
                :style="getStyle(index + 1)"
                @click="page = index + 1" >
                {{item}}
            </div>
        </div>
        <div class="department-manage-content">
            <Manage_Total v-if="page === 1" />
            <Manage_Task v-if="page === 2" />
            <Manage_Sign v-if="page === 3" />
        </div>
    </div>
</template>

<script>

import Manage_Sign from "@dept/vue/manage-sign";
import Manage_Task from "@dept/vue/manage-task";
import Manage_Total from "@dept/vue/manage-total";

export default {
    data() {
        return {
            guide: ["综合统计", "任务统计", "缺勤统计"],    // 待显示的栏目内容
            page: 1                                       // 当前活动项编号，默认为 1
        }
    },
    methods: {
        /**
         * 获取活动项的背景颜色
         * @param {Number} v 活动项编号
         */
        getStyle(v) {
            if (this.page === v) {
                return {
                    background: "rgb(65, 116, 255)",
                    color: "white"
                }
            }
        }
    },
    components: {
        Manage_Sign,
        Manage_Task,
        Manage_Total
    }
}
</script>

<style lang="scss">
@import "@dept/scss/manage-index.scss";
</style>